// 引入公共组件
require('../less/commCss/basic.css')
// 引入当前css
require('../less/home.less')
// 引入轮播图
require('../lib/swiper/swiper.css')
// httpajax传输
const {$http} = require('../lib/commonJs/http.js')
// 公共组件
const utils = require('../lib/commonJs/utils.js')
// 轮播图
const swiper = require('../lib/swiper/swiper.js')

// 是否登录
utils.isLogin()

// 获取用户ID
const id = localStorage.getItem('userId')

// 获取元素
const ranking = document.querySelector('.ranking')
const num = document.querySelector('.num')
const clockIn = document.querySelector('.clock-in')
const day = document.querySelector('.day')

// 渲染导航栏
utils.showNav('home')
var mySwiper = new swiper('.main-banner', {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination',
    },

    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // 如果需要滚动条
    scrollbar: {
        el: '.swiper-scrollbar',
    },
    autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
    },

})

// 渲染
function showMessage(){
    $http.get(`/headPageInfo?userId=${id}`,function({data}){
        ranking.textContent = data.rank
        num.textContent = data.insigniaNum
        clockIn.textContent = data.isPunch === 'true' ? '已打卡' : '今日打卡';
        day.textContent=  data.punchIn
    })
}
showMessage()

// 打卡
clockIn.addEventListener('click',()=>{
    $http.get(`/clockIn?userId=${id}`,function({status}){
        if(status === 0){
            clockIn.textContent = '已打卡'
            showMessage()
        }else if(status === 1){
            utils.toast('fail','今日已打卡')
        }
    })
})